<template>
  <div class="planList">
    <div class="planStatis">
      <div class="statistic">
        <div class="label">
          <span>子计划：</span>
        </div>
        <div>
          <span
            >共 <span style="color: #b47455">{{ allPlans }}</span> 个</span
          >
          <el-divider direction="vertical"></el-divider>
          <span
            >待下发：<span style="color: #d7d7d7">{{
              countResult.toIssue
            }}</span>
          </span>
        </div>
        <div>
          <span
            >已下发：<span style="color: #b4d5f8">{{
              countResult.issued
            }}</span></span
          >
        </div>
        <div>
          <span
            >执行中：<span style="color: #8083ff">{{
              countResult.execute
            }}</span>
          </span>
        </div>
        <div>
          <span
            >已完成：<span style="color: #caf991">{{
              countResult.finish
            }}</span>
          </span>
        </div>
      </div>
    </div>
    <div style="height: 500px; margin-bottom: 20px">
      <list-table-new
        v-bind="planPackageConfig"
        ref="planListTable"
      ></list-table-new>
    </div>
  </div>
</template>

<script>
import { issuePlanList } from "@/api/productionPlan/overhaulPlanPackage.js";
export default {
  props: {
    depts: {
      type: Object,
      default: () => {
        return {};
      },
    },
    static: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      hidden: false,
      planPackageConfig: {
        showIndex: true,
        selectionShow: false,
        showFilterBtn: false,
        showCustomBtn: false,
        showSearch: false,
        searchObj: {
          searchMethod: (params, sortStr) => {
            //this.synchronizeRiskData(params, sortStr);
            this.getTableData(params, sortStr);
          },
          searchArr: [],
          queryData: {
            page: 1,
            pageSize: 10,
          },
        },
        tableMethods: {
          rowClick: (row) => {
            this.selectId = row.id;
          },
        },
        actionList: [],
        column: [
          {
            label: "工作类别",
            prop: "jobType",
            formatter: (row) => {
              return this.$store.getters.fineDirtDataName(
                "plan_package_type",
                row.jobType
              );
            },
          },
          {
            label: "设备管理单位",
            prop: "deptManageName",
          },
          {
            label: "设备",
            prop: "equipmentName",
            formatter: (row) => {
              return row.equipments
                .map((i) => {
                  return i.equipmentName;
                })
                .join(", ");
            },
          },
          {
            label: "工作内容",
            prop: "content",
          },
          {
            label: "计划起止时间",
            prop: "planStartTime",
            formatter: (row) => {
              return `${row.startTime}~${row.endTime})`;
            },
          },
          {
            label: "主办单位",
            prop: "organizerName",
          },
          {
            label: "提醒时间",
            prop: "remindTime",
          },
          {
            label: "备注",
            prop: "desc",
          },
          {
            label: "状态",
            prop: "status",
            scopeType: "formate",
            textAlign: "center",
            method: (row) => {
              let str = this.$store.getters.fineDirtDataName(
                "package_issue_status",
                row.status
              );
              switch (row.status) {
                case 1:
                  return `<span class="patCircle" style="background:#D7D7D7">${str}</span>`;
                  break;
                case 2:
                  return `<span class="patCircle" style="background:#b4d5f8">${str}</span>`;
                  break;
                case 3:
                  return `<span class="patCircle" style="background:#8083ff">${str}</span>`;
                  break;
                default:
                  return `<span class="patCircle" style="background:#caf991">${str}</span>`;
                  break;
              }
            },
          },
        ],
        tableData: [],
        tableMethods: {
          //点击行的方法
          rowClick: (row) => {
            switch (row.jobType) {
              case "overhaul":
                this.goDetailPage(row.id, "bigChangePlanDetail", "edit");
                break;
              case "experiment":
                this.goDetailPage(row.id, "experimentPlanDetail", "edit");
                break;
              default:
                this.goDetailPage(row.id, "plannedMaintenancePlanDetail", "edit");
                break;
            }
          },
        },
        paginationObj: {
          pageSizes: [10, 20, 50, 100],
        },
        totalNumber: 0,
        countResult: {},
      },
      countResult: {},
      deptName: "",
    };
  },
  created() {
    window.addEventListener("storage", this.updateData);
    this.init(this.depts);
  },
  beforeDestroy() {
    /* 删除监听事件 */
    window.removeEventListener("storage", this.updateData);
  },
  mounted() {
    this.$refs.planListTable.searchData();
    //this.init(this.depts);
    //this.countResult = this.static[this.deptName];
    if (JSON.stringify(this.static) == "{}") {
      this.countResult = {
        toIssue: 0,
        issued: 0,
        execute: 0,
        finish: 0,
        noFinish: 0,
      };
    } else {
      this.countResult = this.static[this.deptName];
    }
  },
  computed: {
    allPlans() {
      let num = 0;
      for (const key in this.countResult) {
        if (Object.hasOwnProperty.call(this.countResult, key)) {
          if (key != "noFinish") {
            num += this.countResult[key];
          }
        }
      }
      return num;
    },
  },
  watch: {
    depts: {
      handler(val) {
        this.init(val);
        this.updateData();
      },
      deep: true,
    },
    static: {
      handler(val) {
        this.countResult = val[this.deptName];
      },
      deep: true,
    },
  },
  methods: {
    //初始化
    init(val) {
      //debugger;
      this.deptName = val.deptName;
      this.packageDeptId = val.id;
      this.packageId = val.packageId;
      //this.countResult = this.static[this.deptName];
    },
    updateData() {
      this.$refs.planListTable.searchData();
    },
    //跳转到详情页
    goDetailPage(id, router, type, jobType) {
      const { href } = this.$router.resolve({
        name: router,
        query: {
          id: id ? id : "",
          pageType: type ? type : "",
          jobType: jobType ? jobType : "",
        },
      });
      window.open(href, "_blank");
    },
    // 获取表格数据
    getTableData(params, sortStr) {
      let queryData = Object.assign({}, params);
      if (sortStr.length > 0) {
        queryData.orders = sortStr;
      }
      queryData.packageDeptId = this.packageDeptId;
      queryData.packageId = this.packageId;
      issuePlanList(queryData).then((res) => {
        this.$set(this.planPackageConfig, "tableData", res.data.list);
        this.$set(this.planPackageConfig, "totalNumber", res.data.total);
      });
    },
  },
};
</script>

<style lang="less" scoped>
.planList {
  width: 100%;
  height: 100%;
  .planStatis {
    margin-left: 14px;
    margin-bottom: 10px;
    display: flex;
    .statistic {
      display: flex;
      width: 500px;
      div {
        height: 25px;
        margin: 0 10px;
        text-align: center;
        line-height: 25px;
        span {
          color: #7f7f7f;
          span {
            font-size: 16px;
          }
        }
      }
    }
  }
}
/deep/.patCircle {
  display: inline-block;
  width: 60px;
  height: 20px;
  line-height: 20px;
  border-radius: 15px;
  border: 1px solid rgba(223, 223, 223, 0.568);
  color: #f7f7f7;
}
</style>